<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 100px;
      padding: 20px;
      border: 2px solid #333;
      border-radius: 5px;
      margin: 50px auto;
    }

    hr {
      margin: 10px 0;
    }
  </style>
</head>
<body>


  <div class="box">
    <input type="checkbox"> 全选
    <hr>
    <input class="item" type="checkbox"> 选项一 <br>
    <input class="item" type="checkbox"> 选项二 <br>
    <input class="item" type="checkbox"> 选项三 <br>
    <input class="item" type="checkbox"> 选项四 <br>
  </div>

<script>
     // 点击全选按钮 下面的所有选项被选中 
     // 如果再次点击全选按钮  取消选中  下面的所有选项也取消 


     // 拿到全选按钮的状态  
     // 然后把这个状态给到每个 选项的状态  
     //获取全选按钮  获取所有的选项 
     var allbtn = document.querySelector('input');
     var items = [...document.querySelectorAll('.item')];


     // 给全选按钮一个点击时间 
    //  allbtn.onclick = function(){
    //     var status = allbtn.checked;// 获取是否被选中  
    //     //遍历每个选项 
    //     // 把status 赋值给每个选项
    //     items.forEach(function(item){
    //         item.checked = status
    //     });

    //  }
     // 上面是单单操作一个全选按钮 

     // 需求升级
     // 操作四个选项  如果四个选项 全被选中  全选按钮也被选中 
     // 如果有一个没有选中 或者都不选中  全选按钮就不选中  

     // 点击全选按钮 全选按钮的状态给到每个选项 
    allbtn.onclick = function(){
        items.forEach(function(item){
        //item是每一个选项 
        item.checked = allbtn.checked;
    });
    }



    items.forEach(function(item){
        //item是每一个选项 
        item.onclick = handle;
    });

    // 点击每一个选项要做的事情  

    // 是否每个选项都被选中   如果都被选中 返回true  有一个 不选中  false 
    // every 判断数组是否每一项都满足条件 
    // 有返回值  需要 return 
    function handle(){
        allbtn.checked = items.every(function(item){
            return item.checked == true
        });
    }




</script>
</body>
</html>